site_8g/src/app/[locale]/affiliate/summary/page.tsx

import { FC, PropsWithChildren } from "react";
import './page.css'

interface Props { }

const App: FC<PropsWithChildren<Props>> = (props) => {
    // function handleSlide(e:any):void{
    //     const startX = e.clientX - sliderRef.current.offsetX
    // }
    return (
            <div className="vux-drawer">
                <div className="vux-drawer-body" style={{ transform: "translate3d(0px,0px,0px)" }}>
                    <div className="referral router-view" id="id-router-view" style={{ backgroundColor: "rgb(237, 237, 237)" }}>
                        <div className="headerBack">
                            <div className="left">
                                <span className="iconfont icon-xiangzuo1"/>
                            </div>
                            <div className="title">
                                Afiliado
                                <span> - Ganhe R$ 10.000 por dia</span>
                            </div>
                            <div className="right">
                                <span className="iconfont icon-company_nav_icon_home router-link-active"/>
                            </div>
                        </div>
                        <div className="tabs alginLeft van-tabs van-tabs--line">
                            <div className="van-tabs__wrap van-tabs__wrap--scrollable">
                                <div role="tablist" className="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete">
                                    <div role="tab" className="van-tab van-tab--active" aria-selected="true">
                                        <span className="van-tab__text">PAINEL</span>
                                    </div>
                                    <div role="tab" className="van-tab">
                                        <span className="van-tab__text">REFERÊNCIAS</span>
                                    </div>
                                    <div role="tab" className="van-tab">
                                        <span className="van-tab__text">RELATÓRIO</span>
                                    </div>
                                    <div role="tab" className="van-tab">
                                        <span className="van-tab__text">PAGAMENTOS</span>
                                    </div>
                                    <div role="tab" className="van-tab">
                                        <span className="van-tab__text">FAQ</span>
                                    </div>
                                    <div role="tab" className="van-tab">
                                        <span className="van-tab__text">TUTORIAL</span>
                                    </div>
                                    <div className="van-tabs__line" style={{transform: "translateX(40px) translateX(-50%);transition-duration: 0.3s"}}></div>
                                </div>
                            </div>
                        </div>
                        <div className="content">
                            <div className="summary referral-router-view">
                                <div className="content">
                                    <div className="title">
                                        <div>
                                            {" "}
                                            Hoje
                                            <span className="iconfont icon-bangzhu"/>
                                        </div>
                                    </div>
                                    <div className="cardMian">
                                        <div>
                                            <ul className="today">
                                                <li>
                                                    <span className="num">0</span>
                                                    <span> Inscrições </span>
                                                </li>
                                                <li>
                                                    <span className="num">0</span>
                                                    <span> Novos jogadores </span>
                                                </li>
                                                <li>
                                                    <span className="num">0</span>
                                                    <span> Aposta válidas em equipe </span>
                                                </li>
                                                <li>
                                                    <span className="num">0</span>
                                                    <span> Comissão </span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div className="content">
                                    <div className="title">
                                    <div>
                                            {" "}
                                            Total 
                                            <span className="iconfont icon-bangzhu"/>
                                        </div>
                                    </div>
                                    <div className="cardMian">
                                    <div>
                                            <ul className="total">
                                                <li>
                                                    <span className="num">0</span>
                                                    <span> Inscrições </span>
                                                </li>
                                                <li>
                                                    <span className="num">0</span>
                                                    <span>  Jogadores totais  </span>
                                                </li>
                                                <li>
                                                    <span className="num">0</span>
                                                    <span>  Aposta válidas total  </span>
                                                </li>
                                                <li>
                                                    <span className="num">0</span>
                                                    <span> Comissão </span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div className="content">
                                    <div className="title">
                                    <div>
                                            {" "}
                                            Comissão  
                                            <span className="iconfont icon-bangzhu"/>
                                        </div>
                                    </div>
                                    <div className="cardMian">
                                        <div className="vip">
                                            <div className="level">
                                                <span className="iconfont icon-vip"></span>
                                                <span className="levelNum">1</span>
                                            </div>
                                            <div>
                                                Nível de Agente
                                                <span className="iconfont icon-tishi"></span>
                                            </div>
                                        </div>
                                        <div>
                                            <ul className="commission">
                                                <li>
                                                    <span className="num">
                                                        <span>R$</span>
                                                        <span className="cash">0.00</span>
                                                    </span>
                                                    <span> Total pago </span>
                                                </li>
                                                <li>
                                                    <span className="num">
                                                        <span>R$</span>
                                                        <span className="cash">0.00</span>
                                                    </span>
                                                    <span>  Não pago  </span>
                                                </li>
                                            </ul>
                                            <div className="wallet">
                                                <div className="btn"> TRANSFERIR PARA A CARTEIRA </div>
                                                <div className="tip">
                                                    <span className="iconfont icon-tishi1"></span>
                                                    Valor mínimo de transferência de  10 BRL
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="content shareMain">
                                    <div className="title">Compartilhe com sua comunidade social</div>
                                    <div className="share">
                                        <ul className="sharePlatform">
                                            <li>
                                                <a href="">
                                                    <img src="/img/facebook.webp" alt="" />
                                                </a>
                                                <span>Facebook</span>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <img src="/img/WhatsApp.webp" alt="" />
                                                </a>
                                                <span>WhatsApp</span>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <img src="/img/Telegram.png" alt="" />
                                                </a>
                                                <span>Telegram</span>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <img src="/img/Twitter.webp" alt="" />
                                                </a>
                                                <span>Twitter</span>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <img src="/img/email.webp" alt="" />
                                                </a>
                                                <span>Email</span>
                                            </li>
                                        </ul>
                                    </div>
                                    <div className="shareLink">
                                        <div className="tip">Compartilhe este link de indicação com seus amigos</div>
                                        <div className="copyUrl">
                                            <span className="url omitWrap">https://www.9f.com/br/m/r/xxxxxx</span>
                                            <span id="copy">Cópia</span>
                                        </div>
                                    </div>
                                </div>
                                <div className="content">
                                    <div className="title">
                                        <div> Grupo CHAT entre agentes por telegram oficial do 9F.COM </div>
                                    </div>
                                    <div>
                                        <div className="tel-box">
                                            <a href="" className="telicon">
                                                <img src="/img/telegram.webp" alt="" />
                                            </a>
                                            <div className="hintTitle3">
                                                Clique o botão de ícone no lado esquerdo, junte-se ao nosso grupo afiliado do TG oficial Vamos oferecer- lo as palavras afiliadas profissionais e as ferramentas afiliadas profissionais. E ajudar-lo obter bem os benefícios reais.
                                            </div>
                                        </div>
                                        <div className="hintTitle2">
                                            <i className="iconfont icon-tishi"></i>
                                            Se você tem um grande público e seguidores. Temos condições especiais para você personalizar seu programa de indicações! para mais detalhes, por favorcontate- nos:  
                                            <a href="" style={{borderBottom: "1px solid rgb(109, 155, 195)",color:"#0000EE"}}>business@9f.com</a>
                                        </div>
                                    </div>
                                </div>
                                <div className="content">
                                    <div className="title">
                                        <div>
                                            Regras de recompensas por comissão‰ 
                                            <span className="iconfont icon-bangzhu"></span>
                                        </div>
                                    </div>
                                    <div className="hint">
                                        <div className="hintTitle">
                                            Ganhe dinheiro indicando amigos para o 9F.COM, você ganha mais de 80% em recompensas de comissão!
                                        </div>
                                        <div className="imgContent">
                                            <img src="/img/cash.png" alt="" />
                                            <div>
                                                Número de indicações > 100
                                                <br />
                                                Comissão > R$ 5,000 todo mês!
                                            </div>
                                            <div className="slider van-slider" style={{height: "0.02rem"}}>
                                                <div className="van-slider__bar" style={{width: "0.900901%",background: "rgb(0, 157, 128)"}}>
                                                    <div role="slider" className="van-slider__button-wrapper">
                                                        <div className="img"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="relationSchema">
                                            <div className="groupTitle">Unlimited development of subordinates</div>
                                            <img src="/img/group_br.webp" alt="" className="groupImg"/>
                                            <ul className="rules">
                                                <li>
                                                    Você receberá uma porcentagem de comissão diferente toda vez que um jogador indicado por você fizer uma aposta, 
                                                    <span style={{color:"red"}}>ganhar ou perder</span>
                                                    .
                                                </li>
                                                <li>
                                                    O sistema calcula a comissão a cada 3 minutos.
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div className="content"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    );
};

export default App;